<template>
  <div>
    <el-cascader filterable :props="{checkStrictly: checkStrictly }" :placeholder="placeholder" :show-all-levels="showAllLevels" :options="regionList" v-model="citySelection" :disabled="disabled" clearable @change="citySelectionChange" ref="citySelection" style="width: 100%;"></el-cascader>
  </div>
</template>

<script>
import { treeByArea, regionalCities } from '@/api/system/dept.js'

export default {
  name: 'RegionCityLink',
  model: {
    prop: 'value',
    event: 'dataChange'
  },
  props: {
      checkStrictly:{
        type:Boolean,
        default:true
      },
    value: {
      type: Array,
      default() {
        return []
      }
    },
    placeholder: {
      type: String,
      default: '请选择'
    },

    showAllLevels: {
      type: Boolean,
      default: true
    },

    defaultSelect: {
      type: Array,
      default() {
        return [];
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }

  },


  data() {
    return {
      regionList: [],
      citySelection: [],
    }
  },
  watch: {
    value: {
      handler(val) {
        this.citySelection = val
      },
      deep: true,
      immediate: true
    },
    defaultSelect: {
      handler(val) {
        console.log('defaultSelect', val)

        if (val && val.length > 0) {
          // this.regionList = this.regionList.map(item=>{
          //     item.disabled = item.value != val[0]
          //     return item
          // })

          this.regionList = this.regionList.map(item => {
            item.disabled = item.value != val[0]

            item.children = item.children.map(citem => {
              citem.disabled = citem.value != val[1]

              citem.children = citem.children.map(ditem => {
                ditem.disabled = ditem.value != val[2]
                return ditem
              })
              return citem
            })

            return item
          })

        } else {
          this.regionList = this.regionList.map(item => {
            item.disabled = false

            item.children = item.children.map(citem => {
              citem.disabled = false

              citem.children = citem.children.map(ditem => {
                ditem.disabled = false
                return ditem
              })
              return citem
            })

            return item
          })
        }


      },
      deep: true,
      immediate: true
    },

  },
  mounted() {
    this.getData()
  },
  methods: {

    getData() {
      regionalCities({
        regionLevel: '2',//大区-省-市
      }).then(res => {

        res.data = res.data.map(item => {
          item.children = item.children.map(citem => {
            citem.children = citem.children.map(ditem => {
              ditem.children = null
              return ditem
            })
            return citem
          })
          return item
        })

        this.regionList = res.data
      })
    },

    citySelectionChange(val) {

      if (val) {
        this.$emit('change', this.$refs.citySelection.getCheckedNodes(true))
      } else {
        this.$emit('change', val)
      }

      // console.log(this.$refs.citySelection.getCheckedNodes(true));
      // this.$emit('dataChange', )
    },
  }
}

</script>

<style lang="scss" scoped></style>
